<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <svg width="400" height="400" viewBox="0 0 100 100">
        
        <defs>
            <pattern id="pattern1" x="0" y="0" width=".25" height=".25" patternUnits="">
                <circle cx="10" cy="10" r="10" fill="#acf"/>
            </pattern>
        </defs>
     
        <rect x="10" y="10" width="80" height="80" fill="url(#pattern1)"
            stroke="#00f" stroke-width=".5" stroke-dasharray="2.5"/>

        <rect x="10" y="10" width="20" height="20" fill="none" stroke="#fac"/> 
        <text x="20" y="20" font-size="4" text-anchor="middle">起始区域</text>   
    </svg>





    
    <hr>
    <svg width="400" height="400" viewBox="0 0 100 100">
        
        <defs>
            <pattern id="pattern2" x="40" y="40" width="20" height="20" patternUnits="userSpaceOnUse" patternContentUnits="">
                <circle cx="10" cy="10" r="10" fill="#acf"/>
            </pattern>
        </defs>
     
        <rect x="10" y="10" width="80" height="80" fill="url(#pattern2)"
            stroke="#00f" stroke-width=".5" stroke-dasharray="2.5"/>

        <rect x="40" y="40" width="20" height="20" fill="none" stroke="#fac"/> 
        <text x="50" y="50" font-size="4" text-anchor="middle">起始区域</text>   
    </svg>





    <hr>
    <svg width="400" height="400" viewBox="0 0 100 100">
        <defs>
            <pattern id="pattern3" x="0" y="0" width=".25" height=".25" patternUnits="">
                <circle cx="10" cy="10" r="10" fill="#acf"/>
            </pattern>
        </defs>
     
        <rect x="10" y="10" width="80" height="80" fill="url(#pattern3)"
            stroke="#00f" stroke-width=".5" stroke-dasharray="2.5"/>

        <rect x="10" y="10" width="20" height="20" fill="none" stroke="#fac"/> 
        <text x="20" y="20" font-size="4" text-anchor="middle">起始区域</text>   
    </svg>
   
    <svg width="400" height="400" viewBox="0 0 100 100">
        <defs>
            <pattern id="pattern4" x="0" y="0" width=".25" height=".25" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox">
                <circle cx=".125" cy=".125" r=".125" fill="#acf"/>
            </pattern>
        </defs>
     
        <rect x="20" y="20" width="40" height="40" fill="url(#pattern4)"
        stroke="#00f" stroke-width=".5" stroke-dasharray="2.5"/>

    </svg>




    <hr>
    <svg width="400" height="400" viewBox="0 0 100 100">
        
        <defs>
            <pattern id="pattern5" x="40" y="40" width="20" height="20" patternUnits="userSpaceOnUse" patternContentUnits="">
                <circle cx="10" cy="10" r="10" fill="#acf"/>
            </pattern>
        </defs>
     
        <rect x="20" y="20" width="40" height="40" fill="url(#pattern5)"
            stroke="#00f" stroke-width=".5" stroke-dasharray="2.5"/>
        
    </svg>





    <hr>
    <svg width="400" height="400" viewBox="0 0 100 100">
        
        <defs>
            <pattern viewBox="0 0 40 40" id="pattern6" x="40" y="40" width="20" height="20" patternUnits="userSpaceOnUse" patternContentUnits="">
                <circle cx="10" cy="10" r="10" fill="#acf"/>
            </pattern>
        </defs>
     
        <rect x="20" y="20" width="40" height="40" fill="url(#pattern6)"
            stroke="#00f" stroke-width=".5" stroke-dasharray="2.5"/>
        
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100">
        
        <defs>
            <pattern  id="pattern71" x="40" y="40" width="20" height="20" patternUnits="userSpaceOnUse" patternContentUnits="">
                <image href="../imgs/1.png" x="0" y="0" height="20" width="20" preserveAspectRatio="xMidYMid slice"/>
            </pattern>
        </defs>
     
        <rect x="20" y="20" width="40" height="40" fill="url(#pattern71)"
            stroke="#00f" stroke-width=".5" stroke-dasharray="2.5"/>
        <rect x="25" y="22" width="10" height="10" fill="none" stroke="#f00"/>    
        
    </svg>
    <svg width="400" height="400" viewBox="0 0 100 100">
        
        <defs>
            <pattern viewBox="5 2 10 10"  id="pattern7" x="40" y="40" width="20" height="20" patternUnits="userSpaceOnUse" patternContentUnits="">
                <image href="../imgs/1.png" x="0" y="0" height="20" width="20" preserveAspectRatio="xMidYMid slice"/>
            </pattern>
        </defs>
     
        <rect x="20" y="20" width="40" height="40" fill="url(#pattern7)"
            stroke="#00f" stroke-width=".5" stroke-dasharray="2.5"/>
        
    </svg>




    <hr>
    <svg width="400" height="400" viewBox="0 0 100 100">
        
        <defs>
            <pattern id="pattern82" x="0" y="0" width=".25" height=".25" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox">
                <circle cx=".125" cy=".125" r=".125" fill="#caf"/>
            </pattern>
            <pattern id="pattern81" x="0" y="0" width=".25" height=".25" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox">
                <circle cx=".125" cy=".125" r=".125" fill="url(#pattern82)"/>
            </pattern>
        </defs>
     
        <rect x="10" y="10" width="80" height="80" fill="url(#pattern81)"
            stroke="#00f" stroke-width=".5" stroke-dasharray="2.5"/>
        
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100">
        
        <defs>
            <pattern id="pattern92" x=".375" y=".375" width=".25" height=".25" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox">
                <line x1=".125" y1="0"
                      x2=".125" y2=".25"
                      stroke="#fac"
                      stroke-width=".05"/>
                <line x1="0" y1=".125"
                      x2=".25" y2=".125"
                      stroke="#fac"
                      stroke-width=".05"/>
            </pattern>
            <pattern id="pattern91" x="0" y="0" width=".25" height=".25" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox">
                <circle cx=".125" cy=".125" r=".125" fill="url(#pattern92)" stroke="#fac" stroke-width=".01"/>
            </pattern>
        </defs>
     
        <rect x="10" y="10" width="80" height="80" fill="url(#pattern91)"
            stroke="#00f" stroke-width=".5" stroke-dasharray="2.5"/>
        
    </svg>
    <script src="index.js"></script>
</body>
</html>